<template>
    <div>
        <el-cascader
        	:value='news'
            placeholder="请选择"
            :show-all-levels="false"
            :disabled="disabled"
            size="small"
            :options="arraylist"
            @active-item-change="handleItemChange"
            :props="jobProps"
            @change="jobItemChange">
        </el-cascader>
    </div>
</template>

<script>
    import axios from '~plugins/axios';
    import * as types from '~/store/mutation-types/customer/index';
    import { industry } from '../assets/js/industry.js';
    import Vue from 'vue'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {Cascader} from 'element-ui';
    Vue.use(Cascader);
    export default {
        data () {
            return {
            	arraylist:[],
                news:['','','',''],
                jobProps: {
                    value: 'code',
                    label:'name',
                    level:'level',
                    children: 'children'
                },
                code: '',
                timer : null
            }
        },
        props:{
            disabled :{
                default: false
            },
            value :{
            	default:[]
            }
        },
        methods: {
        	
            jobItemChange(val){
                this.$parent.$parent.$parent.$parent.$parent['getIndustry'](val[3])
            },
            handleItemChange(val) {
                // if(val.length == 4){
                //     this.jobItemChange(val)
                // }
            }
        },
        computed: {
            ...mapGetters({
                'jobList': 'getIndustryList'
            })
        },
        created(){
            this.arraylist = industry;
        },
        mounted(){
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{
                if(this.value.length){
                    for(let i = 0;i<this.value.length;i++){
                        this.news.push(this.value[i])
                    }
                }
            },500)
        }
    }
</script>

<style>
  .el-cascader {width: 100%}
</style>